<div class="dialog" [ngClass]="{'show': showLogin && _showDialog}" id="dialog-login">
    <div class="btn-close" (click)="toggleDialog()"></div>
    <ul class="tabs">
      <li i18n class="tab" [ngClass]="{'active': showLogin}" >{{language=="en"?'Login':''}}{{language=="zh"?'登录':''}}</li>
      <li i18n class="tab" [ngClass]="{'active': !showLogin}" (click)="toggleLogin()">{{language=="en"?'Register':''}}{{language=="zh"?'注册':''}}</li>
    </ul>
    <form  #login_form="ngForm" class="form">
      <div class="form-group" id="login-email">
        <div class="input-wrapper">
          <input type="text" required email maxlength="50" [(ngModel)]="createModel.email" #login_email="ngModel" name="email" i18n-placeholder  placeholder="{{language=='en'?'email':''}}{{language=='zh'?'邮箱':''}}">
            <div *ngIf="login_email.invalid && (login_email.dirty || login_email.touched)"
                 class="alert alert-danger">
                <div i18n *ngIf="login_email.errors.required">
                    {{language=="en"?'Email is required.':''}}{{language=="zh"?'邮箱不能为空':''}}
                </div>
                <div i18n *ngIf="!login_email.errors.required && login_email.errors.email">
                    {{language=="en"?'Invalid email':''}}{{language=="zh"?'邮箱格式不正确':''}}
                </div>
                <div i18n *ngIf="login_email.errors.maxlength">
                    {{language=="en"?'Email maxlength is 50':''}}{{language=="zh"?'邮箱最大长度为50':''}}
                </div>
            </div>
        </div>
      </div>
      <div class="form-group" id="login-password">
        <div class="input-wrapper">
          <input type="password" required minlength="8" maxlength="16" [(ngModel)]="createModel.password" #login_password="ngModel"
                 name="password" i18n-placeholder placeholder="{{language=='en'?'Password':''}}{{language=='zh'?'密码':''}}">
            <div *ngIf="login_password.invalid && (login_password.dirty || login_password.touched)"
                 class="alert alert-danger">
                <div i18n *ngIf="login_password.errors.required">
                    {{language=="en"?'Password is required.':''}}{{language=="zh"?'密码不能为空':''}}
                </div>
                <div i18n *ngIf="login_password.errors.minlength">
                    {{language=="en"?'Password minlenth is 8.':''}}{{language=="zh"?'密码长度不能小于8':''}}
                </div>
                <div i18n *ngIf="login_password.errors.maxlength">
                    {{language=="en"?'Password maxlength is 16.':''}}{{language=="zh"?'密码长度不能大':''}}
                </div>
            </div>
        </div>
        </div>
        <div class="form-group">
            <div class="input-wrapper">
                <div class="row">
                    <div class="col-6 padding-0 padding-right-5">
                            <input type="text" required [(ngModel)]="captchaCode" (blur)="checkCaptcha()" #captcha_code="ngModel" name="captcha_code" i18n-placeholder placeholder="{{language=='en'?'captcha':''}}{{language=='zh'?'验证码':''}}">
                    </div>
                    <div class="col-6 padding-0 padding-left-5">
                            <div class="input-wrapper">
                                <a href="javascript:" (click)="getCaptchaImg()">
                                    <img id="captchaImg" style="display: block; width: 145px;height: 45px">
                                </a>
                            </div>
                    </div>
                </div>
                <div *ngIf="(!captchaValid && captchaCode != null) || captchaCode === ''"
                     class="alert alert-danger" style="margin-bottom:0;">
                    <div i18n *ngIf="captchaCode === ''">
                        {{language=="en"?'Code is required.':''}}{{language=="zh"?'验证码不能为空':''}}
                    </div>
                    <div i18n *ngIf="!captchaValid && captchaCode != null && captchaCode != ''">
                        {{language=="en"?'Wrong code':''}}{{language=="zh"?'验证码错误':''}}
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
        <button i18n class="btn btn-login" [disabled]="!login_form.form.valid || !captchaValid" (click)="login()" id="btn-login">{{language=='en'?'LOGIN':''}}{{language=='zh'?'登录':''}}</button>
      </div>
      <div class="form-group options">
        <label for="login-remember" class="checkbox text-white">
          <input type="checkbox" id="login-remember">
          <span i18n>{{language=="en"?'Remember Me':''}}{{language=="zh"?'记住我':''}}</span>
        </label>
        <a i18n href="javascript:;" (click)="openModal(template)">{{language=="en"?'Forget':''}}{{language=="zh"?'忘记密码':''}} ?</a>
          <ng-template #template>
              <div class="modal-header">
                  <h4 class="modal-title pull-left" i18n>{{language=="en"?'Forget Password':''}}{{language=="zh"?'忘记密码':''}}</h4>
                  <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
                      <span aria-hidden="true">&times;</span>
                  </button>
              </div>
              <div class="modal-body">
                  <div class="text-center">
                      <div class="row" style="margin-bottom: 4%;">
                          <div class="col-md-1 col-xs-12"></div>
                          <div class="col-md-10 col-xs-12">
                              <div class="row">
                                  <div class="col-md-5 col-xs-12" style="margin-top: 8px;">
                                      <label class="control-label" i18n>{{language=="en"?'email：':''}}{{language=="zh"?'邮箱:':''}}</label>
                                  </div>
                                  <div class="col-md-7 col-xs-6">
                                      <input class="form-control my_input" type="text" name="myEmail" [(ngModel)]="createModel.email" #myEmail="ngModel" email='' placeholder="{{language=='en'?'Please enter your email':''}}{{language=='zh'?'请输入您的邮箱':''}}" i18n-placeholder required="required"/>
                                      <div class="alert alert-danger" *ngIf="myEmail.invalid && (myEmail.dirty || myEmail.touched)">
                                          <div *ngIf="myEmail.errors.required" i18n>
                                            {{language=="en"?'Email is required!':''}}{{language=="zh"?'邮箱不能为空':''}}
                                          </div>
                                          <div *ngIf="!myEmail.errors.required && myEmail.errors.email" i18n>
                                            {{language=="en"?'Invalid email!':''}}{{language=="zh"?'邮箱格式不正确':''}}
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <div class="col-md-1 col-xs-12"></div>
                      </div>
                      <div class="row">
                          <div class="col-md-1 col-xs-12"></div>
                          <div class="col-md-10 col-xs-12">
                              <div class="row mt-50">
                                  <div class="col-md-12 col-xs-12">
                                      <button class="btn btn-primary btn-block" (click)="forgetPass(createModel.email)" [ngClass]="{'btn-primary':(createModel.email!='')}" [disabled]="myEmail.invalid || canGetemail" >{{getEmailName}}</button>
                                  </div>
                              </div>
                          </div>
                          <div class="col-md-1 col-xs-12"></div>
                      </div>

                  </div>
              </div>
          </ng-template>
      </div>
    </form>
</div>
<div class="dialog text-white" [ngClass]="{'show': !showLogin && _showDialog}" id="dialog-register">
    <div class="btn-close" (click)="toggleDialog()"></div>
    <ul class="tabs">
        <li i18n class="tab" (click)="toggleLogin()">{{language=="en"?'Login':''}}{{language=="zh"?'登录':''}}</li>
        <li i18n class="tab active">{{language=="en"?'Register':''}}{{language=="zh"?'注册':''}}</li>
    </ul>
    <form class="form"  #sign_form="ngForm">
        <div class="form-group" id="register-email">
        <div class="input-wrapper">
            <input type="text" required email maxlength="50" name="email" [(ngModel)]="createModel.email" #email="ngModel" i18n-placeholder placeholder="{{language=='en'?'email':''}}{{language=='zh'?'邮箱':''}}">

            <div *ngIf="email.invalid && (email.dirty || email.touched)"
                 class="alert alert-danger">
                <div i18n *ngIf="email.errors.required">
                    {{language=="en"?'Email is required.':''}}{{language=="zh"?'邮箱不能为空':''}} 
                </div>
                <div i18n *ngIf="!email.errors.required && email.errors.email">
                    {{language=="en"?'Invalid email.':''}}{{language=="zh"?'邮箱格式不正确':''}}
                </div>
                <div i18n *ngIf="email.errors.maxlength">
                    {{language=="en"?'Email maxlength is 50.':''}}{{language=="zh"?'邮箱长度不能大于50':''}}
                </div>
            </div>
        </div>
        </div>
        <div class="form-group" id="login-username">
          <div class="input-wrapper">
            <input type="text" required minlength="3"  maxlength="20" name="username" [(ngModel)]="createModel.username" #username="ngModel" i18n-placeholder placeholder="{{language=='en'?'Username':''}}{{language=='zh'?'用户名':''}}">

              <div *ngIf="username.invalid && (username.dirty || username.touched)"
                   class="alert alert-danger">
                  <div i18n *ngIf="username.errors.required">
                    {{language=="en"?'Username is required.':''}}{{language=="zh"?'用户名不能为空':''}}
                  </div>
                  <div i18n *ngIf="username.errors.minlength">
                    {{language=="en"?'Username minlength is 3.':''}}{{language=="zh"?'用户名长度不能小于3':''}} 
                  </div>
                  <div i18n *ngIf="username.errors.maxlength">
                    {{language=="en"?'Username maxlength is 20.':''}}{{language=="zh"?'大于20':''}}
                  </div>
              </div>
          </div>
        </div>
        <div class="form-group" id="register-password">
            <div class="input-wrapper">
                <input type="password" required minlength="8" maxlength="16" name="password" [(ngModel)]="createModel.password" #password="ngModel" i18n-placeholder placeholder="{{language=='en'?'Password(8-16,mix numbers and letters)':''}}{{language=='zh'?'密码(8-16位)':''}}">
                <div *ngIf="password.invalid && (password.dirty || password.touched)"
                     class="alert alert-danger">
                    <div i18n *ngIf="password.errors.required">
                        {{language=="en"?'Password is required.':''}}{{language=="zh"?'密码不能为空':''}}
                    </div>
                    <div i18n *ngIf="password.errors.minlength">
                        {{language=="en"?'Password minlenth is 8.':''}}{{language=="zh"?'密码长度不能小于8':''}}
                    </div>
                    <div i18n *ngIf="password.errors.maxlength">
                        {{language=="en"?'Password maxlength is 16.':''}}{{language=="zh"?'密码长度不能大于16':''}}
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group image-captcha" id="register-captcha-image" style="display: none">
        <div class="input-wrapper">
            <input type="text" name="image_captcha" placeholder="Image CAPTCHA">
        </div>
        </div>
        <div class="form-group email-captcha" style="margin-bottom: 0px" id="register-captcha-email">
            <div class="input-wrapper">
                <input type="text" [(ngModel)]="this.createModel.code" (blur)="checkVerify()" i18n-placeholder placeholder="{{language=='en'?'Email Captcha':''}}{{language=='zh'?'邮箱验证码':''}}" name="verifycode" id="verifycode">

            </div>
            <button class="btn btn-login" (click)="getVerify()" [disabled]="!canGetVerifyCode || email.invalid">{{getCodeBtnName}}</button>
        </div>
        <div *ngIf="this.createModel.code !== null && !verifyValid" class="alert alert-danger">
            <div i18n *ngIf="this.createModel.code === '' && !getVerifyError">
                {{language=="en"?'Verify code is required.':''}}{{language=="zh"?'验证码不能为空':''}}
            </div>
            <div i18n *ngIf="this.createModel.code !== '' && !verifyValid && !getVerifyError">
                {{language=="en"?'Verify code not valid.':''}}{{language=="zh"?'验证码错误':''}}
            </div>
            <div i18n *ngIf="getVerifyError">
                {{language=="en"?'Get Verify code error, Please retry.':''}}{{language=="zh"?'获取验证码错误，请重试':''}}
            </div>
        </div>
        <div class="row form-group">
            <div class="col p-0">
                <label style="margin-top:10%;" class="checkbox-margin">
                    <input style="vertical-align: middle;" type="checkbox" [checked]="isChecked" (click)="isCheck()" > <span style="white-space:nowrap;">{{language=="en"?'agree protocol':''}}{{language=="zh"?'同意协议':''}}</span>
                </label>
            </div>
            <div class="col p-0">
                <button i18n style="margin-top:5%;width:100%;" class="btn btn-login" [disabled]="!sign_form.form.valid || !verifyValid || !isChecked" (click)="signUp()" id="btn-register">{{language=="en"?'REGISTER':''}}{{language=="zh"?'注册':''}}</button>
            </div>
        </div>
        <div class="form-group options">
        <span i18n style="cursor: pointer" (click)="showTips('register')">{{language=="en"?'Can not register ?':''}}{{language=="zh"?'无法注册？':''}}</span>
        </div>
        <div class="form-group" id="register-helper" *ngIf="tipShowed">
        <p>
            <span i18n>{{language=="en"?'Send your email, name, ID number, ID photos to':''}}{{language=="zh"?'您的注册信息已提交':''}}</span>
            <span class="highlight">service@yoyoarkchain.org</span>
            <span i18n>{{language=="en"?'Verification will be done in 2 work days. And your login info will be sent to your email.':''}}{{language=="zh"?'认证将在两个工作日内完成，并且登录信息将会发送至您的邮箱':''}} </span>
        </p>
        </div>
    </form>
</div>